<template>
  <div class="electron-app">
    <Sidebar />
    <div class="app-right-container">
      <TitleBar />
      <main class="app-content">
        <router-view />
      </main>
    </div>
  </div>
</template>

<script setup>
import Sidebar from '../../components/layout/SideBar.vue'
import TitleBar from '../../components/layout/TitleBar.vue'
</script>

<style scoped>
.electron-app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  background: linear-gradient(90deg,
      #207FFC 0%,
      rgba(32, 127, 252, 0.4) 38%,
      rgba(32, 127, 252, 0.12) 100%);
}

.app-right-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 800px;
  width: 100%;
}

.app-content {
  flex: 1;
  background: white;
  border-radius: 8px;
  margin: 0 30px 30px 0;
  overflow: auto;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>